import React, { Component, useState } from 'react';
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from '../../../config';
import { Checkbox } from 'antd';
import './line.less'
import camera from "../../../config/camera.js";
import Pole from "../../../config/pole.js";
import options from '../../../config/dituconfig.js'
import { QMap, HeatMap, Marker, MarkerList, Info, TMap } from 'react-tmap'
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['light', 'camera', 'sensor', 'pole'];


export default class map extends Component {

  constructor(a) {
    super(a);
    this.state = {
      alldate: false,
      pole: true,
      camera: false,
      light: false,
      sensor: false,
      keyvalue: ['pole']

    }
  }
  componentWillUnmount() {


  }
  componentDidMount() {

  }
  onAllChange = () => {
    const allbox = document.getElementById('myCheckbox');
    const allboxvalue = allbox.checked;
    if (allboxvalue === true) {
      // meshLog('123',);
      this.setState({
        keyvalue: plainOptions,
        pole: true,
        camera: true,
        light: true,
        sensor: true,
      });
    } else {
      this.setState({
        keyvalue: [],
        pole: false,
        camera: false,
        light: false,
        sensor: false,
      });
    }
    meshLog('isChecked', allboxvalue);
  };
  onChange1 = (value) => {
    console.log('valuevalue:', value);
    let pole1 = 'pole';
    let camera1 = 'camera';
    let light1 = 'light';
    let sensor1 = 'sensor';

    if (value.includes(pole1)) {
      this.setState({
        pole: true,
      });
    } else {
      this.setState({
        pole: false,
      });
    }

    if (value.includes(camera1)) {
      this.setState({
        camera: true,
      });
    } else {
      this.setState({
        camera: false,
      });
    }

    if (value.includes(light1)) {
      this.setState({
        light: true,
      });
    } else {
      this.setState({
        light: false,
      });
    }

    if (value.includes(sensor1)) {
      this.setState({
        sensor: true,
      });
    } else {
      this.setState({
        sensor: false,
      });
    }

    this.setState({
      keyvalue: value
    });

  };

  handleMarkerClick5 = (map) => {
    //const { lng, lat } = event.currentTarget;
    meshLog('map', map);

  };


  render() {
    // { meshLog('this', this.state.pole); }
    return (

      <div className="map" >
        <div className="mapdaohang">
          <span className='mapdaohangzuo' >位置： 智慧夜跑 》路线智能规划</span>
        </div>
        <div className="mapneirong">
          <div className="mapneirong1" id="areaheight">
            <div className="biaoti" >
              <h1 style={{ color: "white", marginTop: 10 }}>功能菜单</h1>
              <Checkbox id="myCheckbox" onChange={() => { this.onAllChange() }}>全部</Checkbox>
              <CheckboxGroup value={this.state.keyvalue} style={{ display: "grid", color: "white", marginLeft: 28 }} options={options} onChange={(value) => { this.onChange1(value) }} ></CheckboxGroup>
            </div>
            {/* <div className="lightdate" ></div> */}
            <div className="ditu" key={this.state.keyvalue} >
              <QMap
                center={{ lng: 120.69704733065794, lat: 31.31123852259022 }}
                style={{ height: '950px' }}
                mapStyleId='style1'
                zoom={15}
                zIndex={0}
                events={{
                  // idle: map => this.handleMapIdle(map),
                  click: e => this.handleMarkerClick(e)
                }}
              >

                <MarkerList id="123"
                  showDecoration
                  data={Pole.slice(0, 34)}
                  //decoration="2"
                  events={{
                    click: map => this.handleMarkerClick5(map)
                  }}
                  style={{ display: this.state.pole === false ? 'none' : 'block' }}
                  visible={this.state.pole}
                  zIndex={2}
                />


                <MarkerList
                  showDecoration
                  data={camera.slice(0, 180)}
                  //animation="5"
                  //decoration="2"
                  events={{
                    click: map => this.handleMarkerClick5(map)
                  }}
                  icon='https://swa.hglighting.net/message/marker1.png'
                  visible={this.state.camera}
                  zIndex={1}
                />



              </QMap>
            </div>

          </div>
          <div className="mapneirong2">
            {/* <h2 style={{ marginTop: 40, marginLeft: -50 }} >总数量:7520个</h2> */}
            <h2 style={{ marginTop: 40, marginLeft: -50 }} >灯具:8000个</h2>
            <h2 style={{ marginTop: 40, marginLeft: -50 }} >摄像头:180个</h2>
            <h2 style={{ marginTop: 40, marginLeft: -50 }} >传感器:826个</h2>
            <h2 style={{ marginTop: 40, marginLeft: -50 }} >跑步杆:33个</h2>
          </div>
        </div>
      </div >
    )
  }
}
